<div class="row">
    <div class="col-md-6 ">
        <!-- BEGIN SAMPLE FORM PORTLET-->
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-cogs"></i>标签&amp;徽章
                </div>
            </div>
            <div class="panel-body">
                <h4 class="block">标签 &amp; 徽章样式</h4>
                <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>
                         Class
                    </th>
                    <th>
                         Labels
                    </th>
                    <th>
                         Badges
                    </th>
                    <th>
                         Roundless Badges
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                         Default
                    </td>
                    <td>
                        <span class="label label-default">
                        Default </span>
                    </td>
                    <td>
                        <span class="badge badge-default">
                        5 </span>
                    </td>
                    <td>
                        <span class="badge badge-default border-roundless">
                        3 </span>
                    </td>
                </tr>
                <tr>
                    <td>
                         Primary
                    </td>
                    <td>
                        <span class="label label-primary">
                        Primary </span>
                    </td>
                    <td>
                        <span class="badge badge-primary">
                        4 </span>
                    </td>
                    <td>
                        <span class="badge badge-primary border-roundless">
                        Hot </span>
                    </td>
                </tr>
                <tr>
                    <td>
                         Info
                    </td>
                    <td>
                        <span class="label label-info">
                        Info </span>
                    </td>
                    <td>
                        <span class="badge badge-info">
                        6 </span>
                    </td>
                    <td>
                        <span class="badge badge-info border-roundless">
                        New </span>
                    </td>
                </tr>
                <tr>
                    <td>
                         Success
                    </td>
                    <td>
                        <span class="label label-success">
                        Success </span>
                    </td>
                    <td>
                        <span class="badge badge-success">
                        1 </span>
                    </td>
                    <td>
                        <span class="badge badge-success border-roundless">
                        2 </span>
                    </td>
                </tr>
                <tr>
                    <td>
                         Danger
                    </td>
                    <td>
                        <span class="label label-danger">
                        Danger </span>
                    </td>
                    <td>
                        <span class="badge badge-danger">
                        3 </span>
                    </td>
                    <td>
                        <span class="badge badge-danger border-roundless">
                        5 </span>
                    </td>
                </tr>
                <tr>
                    <td>
                         Warning
                    </td>
                    <td>
                        <span class="label label-warning">
                        Warning </span>
                    </td>
                    <td>
                        <span class="badge badge-warning">
                        12 </span>
                    </td>
                    <td>
                        <span class="badge badge-warning border-roundless">
                        3 </span>
                    </td>
                </tr>
                </tbody>
                </table>
                <h4 class="block">标题标签</h4>
                <div class="well">
                    <h1>Example heading <span class="label label-default">
                    default </span>
                    </h1>
                    <h2>Example heading <span class="label label-success">
                    success </span>
                    </h2>
                    <h3>Example heading <span class="label label-danger">
                    danger </span>
                    </h3>
                    <h4 class="block">Example heading <span class="label label-info">
                    info </span>
                    </h4>
                    <h4>Example heading <span class="label label-warning">
                    warning </span>
                    </h4>
                    <h6>Example heading <span class="label label-primary">
                    primary </span>
                    </h6>
                </div>
                <div class="clearfix">
                    <h4 class="block">导航徽章</h4>
                    <ul class="nav nav-pills">
                        <li class="active">
                            <a href="javascript:;">
                            Home <span class="badge1">
                            42 </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                            Profile </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                            Messages <span class="badge badge-danger">
                            3 </span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix margin-bottom">
                    </div>
                    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
                        <li class="active">
                            <a href="javascript:;">
                            <span class="badge badge-warning pull-right">
                            42 </span>
                            Home </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                            Profile </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                            <span class="badge badge-success pull-right">
                            3 </span>
                            Messages </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix">
                    <h4 class="block">在线下拉徽章</h4>
                    <div class="dropdown clearfix" >
                        <!-- Link or button to toggle dropdown -->
                        <ul class="dropdown-menu"  style="display:inline-block;position:relative" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Action <span class="badge badge-success">
                                2 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Another action <span class="badge badge-warning">
                                5 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Something here <span class="badge badge-danger">
                                7 </span>
                                </a>
                            </li>
                            <li role="presentation" class="divider">
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Separated link <span class="badge badge-info">
                                12 </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix">
                    </div>
                    <h4 class="block">按钮下拉徽章</h4>
                    <div class="btn-group ">
                        <button class="btn btn-blue dropdown-toggle" data-toggle="dropdown">Open Me!<i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Action <span class="badge badge-success">
                                2 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Another action <span class="badge badge-warning">
                                5 </span>
                                </a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Something here <span class="badge badge-danger">
                                7 </span>
                                </a>
                            </li>
                            <li role="presentation" class="divider">
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="javascript:;">
                                Separated link <span class="badge badge-info">
                                12 </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
        <div class="panel-heading">
            <div class="caption">
                    <i class="fa fa-cogs"></i>缩略图
                </div>
            </div>
            <div class="panel-body">
                <h4 class="block">基本类型</h4>
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <a href="javascript:;" class="thumbnail">
                            <img src="" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-src="../assets/global/plugins/holder.js/100%x180"> </a>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <a href="javascript:;" class="thumbnail">
                            <img src="" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-src="../assets/global/plugins/holder.js/100%x180"> </a>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <a href="javascript:;" class="thumbnail">
                            <img src="" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-src="../assets/global/plugins/holder.js/100%x180"> </a>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <a href="javascript:;" class="thumbnail">
                            <img src="" alt="100%x180" style="height: 180px; width: 100%; display: block;" data-src="../assets/global/plugins/holder.js/100%x180"> </a>
                    </div>
                </div>
                <h4 class="block">自定义内容</h4>
                <div class="row">
                    <div class="col-sm-12 col-md-6">
                        <div class="thumbnail">
                            <img src="" alt="100%x200" style="width: 100%; height: 200px; display: block;" data-src="../assets/global/plugins/holder.js/100%x200">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
                                <p>
                                    <a href="javascript:;" class="btn btn-primary"> Button </a>
                                    <a href="javascript:;" class="btn default"> Button </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6">
                        <div class="thumbnail">
                            <img src="" alt="100%x200" style="width: 100%; height: 200px; display: block;" data-src="../assets/global/plugins/holder.js/100%x200">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
                                <p>
                                    <a href="javascript:;" class="btn btn-danger"> Button </a>
                                    <a href="javascript:;" class="btn default"> Button </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<div class="col-md-6 ">
    <!-- BEGIN SAMPLE FORM PORTLET-->
    <div class="panel panel-widget light bordered">
        <div class="panel-heading">
            <div class="caption">
                <i class="fa fa-cogs"></i>列表组
            </div>
        </div>
        <div class="panel-body">
            <h4 class="block">基本类型</h4>
            <ul class="list-group">
                <li class="list-group-item"> Cras justo odio </li>
                <li class="list-group-item"> Dapibus ac facilisis in </li>
                <li class="list-group-item"> Morbi leo risus </li>
                <li class="list-group-item"> Porta ac consectetur ac </li>
                <li class="list-group-item"> Vestibulum at eros </li>
            </ul>
            <h4 class="block">自定义颜色</h4>
            <ul class="list-group">
                <li class="list-group-item bg-blue"> Cras justo odio </li>
                <li class="list-group-item bg-red"> Dapibus ac facilisis in </li>
                <li class="list-group-item bg-green"> Morbi leo risus </li>
                <li class="list-group-item bg-purple"> Porta ac consectetur ac </li>
                <li class="list-group-item bg-yellow"> Vestibulum at eros </li>
            </ul>
            <h4 class="block">徽章</h4>
            <ul class="list-group">
                <li class="list-group-item"> Cras justo odio
                    <span class="badge badge-default"> 3 </span>
                </li>
                <li class="list-group-item"> Dapibus ac facilisis in
                    <span class="badge badge-success"> 11 </span>
                </li>
                <li class="list-group-item"> Morbi leo risus
                    <span class="badge badge-danger"> new </span>
                </li>
                <li class="list-group-item"> Porta ac consectetur ac
                    <span class="badge badge-warning"> 4 </span>
                </li>
                <li class="list-group-item"> Vestibulum at eros
                    <span class="badge badge-info"> 3 </span>
                </li>
            </ul>
            <h4 class="block">情景类</h4>
            <ul class="list-group">
                <li class="list-group-item"> Default </li>
                <li class="list-group-item list-group-item-success"> Success </li>
                <li class="list-group-item list-group-item-info"> Info
                    <span class="badge badge-warning"> 3 </span>
                </li>
                <li class="list-group-item list-group-item-warning"> Warning
                    <span class="badge badge-default"> 3 </span>
                </li>
                <li class="list-group-item list-group-item-danger"> Danger </li>
            </ul>
            <h4 class="block">链接</h4>
            <div class="list-group">
                <a href="javascript:;" class="list-group-item"> Default </a>
                <a href="javascript:;" class="list-group-item list-group-item-success"> Success </a>
                <a href="javascript:;" class="list-group-item list-group-item-info"> Info
                    <span class="badge badge-warning"> 3 </span>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-warning"> Warning
                    <span class="badge badge-default"> 3 </span>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-danger"> Danger </a>
            </div>
            <h4 class="block">自定义内容</h4>
            <div class="list-group">
                <a href="javascript:;" class="list-group-item active">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. </p>
                </a>
                <a href="javascript:;" class="list-group-item">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. </p>
                </a>
                <a href="javascript:;" class="list-group-item">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. </p>
                </a>
            </div>
        </div>
    </div>
    <!-- END SAMPLE FORM PORTLET-->
</div>
</div>
